<%@ page isELIgnored="false" %> <!-- isELIgnored=true禁用表达式 -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.kid{
				margin-left: 20px;
			}
			.my-font{
				font-size: 16px;
				font-weight: bold;
			}
			.icon-add{
				color: blue;
			}
			.icon-sub{
				color: red;
			}
			.title{
				border: none;
				width: 70px;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui-v2.6.13/layui/css/layui.css"/>
		<script src="${pageContext.request.contextPath}/js/jquery.min-2.1.1.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/layui-v2.6.13/layui/layui.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/my.js"></script>
	</head>
	<body>
		<div>
			<span class="my-font">
			    <i class="title-l" onclick="test(this)"></i>
			    root
			    <i class="icon-add" onclick="openAddLayer('','')"></i>
            </span>
			<c:forEach items="${list}" var="s">
                <div class="kid">
                    <span class="my-font">
                        <i class="title-l" onclick="selectKid(this, ${s.id});"></i>
                        <span>${s.sName}</span>
                        <i class="icon-add" onclick="openAddLayer(${s.id},'${s.sName}')"></i>
                        <i class="icon-sub" onclick="del(${s.id})"></i>
                    </span>

                </div>
			</c:forEach>
		</div>
		<script>
			function del(id){
				$.ajax({
					url: "http://localhost:8080/shopping/sort/delGoodsSort",
					data: "id="+id,
					type: "post",
					success:function (code){
						if (code == 1){
							alert("删除成功")
							location.reload();
						}else {
							alert("删除失败")
							location.reload();
						}
					}
				})
			}
		    function test(obj){
		        var bol = $(obj).hasClass("layui-icon-triangle-r");
                if(bol){
                    $(obj).removeClass("layui-icon-triangle-r");
                    $(obj).addClass("layui-icon-triangle-d");
                    $(obj).parent().nextAll().show();
                } else {
                    $(obj).removeClass("layui-icon-triangle-d");
                    $(obj).addClass("layui-icon-triangle-r");
                    $(obj).parent().nextAll().hide();
                }
		    }
		    //查询子分类
		    function selectKid(obj, pId){
                test(obj);
		        var bol = $(obj).hasClass("hasQuery");
		        if(!bol){
		            $.ajax({
                        url:"query",
                        data: "parentId="+pId,
                        dataType:"json",
                        type: "POST",
                        success: function(d){
                            $.each(d,function(index, item){
                                console.info(item.id + "," + item.sName);
                                $(obj).parent().parent().append(getKidEle(item.id, item.sName));
                            });
                            $(obj).addClass("hasQuery")
                            //重新加载js文件
                            $.getScript('${pageContext.request.contextPath}/js/my.js');
                        }
                    });
		        }
		    }
		    layui.use("layer", function(){
                var layer = layui.layer;
            });

            //添加子分类弹层
            function openAddLayer(pId,pName){
                layer.open({
                  type: 2,
                  area: ['450px', '250px'],
                  content: 'addSortPage?pId='+pId+"&pName="+pName
                });
            }

		</script>
	</body>
</html>